<template>
    <el-container class="container">
        <el-aside :width="isCollapse?'68px':'180px'">
           <div class="logo">{{logotitle}}</div>
           <el-menu
            background-color="#112243"
            text-color="#fff"
            active-text-color="#ff0"
            :unique-opened="true"
            :router="true"
            :collapse="isCollapse"
            :collapse-transition="false">
                <el-submenu :index="item._id" v-for="item in menus" :key="item._id">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span>{{item.title}}</span>
                    </template>

                    <el-menu-item :index="subitem.path" v-for="subitem in item.children" :key="subitem._id">
                        <i class="el-icon-tickets"></i>
                        <span>{{subitem.title}}</span>
                    </el-menu-item>
                     
                </el-submenu>
                
           </el-menu>
        </el-aside>
        <el-container class="main-container">
            <el-header>
                 <div class="bar">
                    <div class="tools">
                    <i class="el-icon-s-fold" v-if="!isCollapse" @click="toggleCollpase"></i>
                    <i class="el-icon-s-unfold" v-else @click="toggleCollpase"></i>
                    </div>
                    <div class="user-bar">
                       <router-link to="/home/userModify"><el-avatar :src="loginUser.image"></el-avatar></router-link>
                    </div>
                 </div>               
            </el-header>
            <el-main>
                <HistoryTags :historyAry="history" @closeTagEvent="removeTagsByIndex"></HistoryTags>
                <!-- 配置二级路由出口 -->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import {mapState,createNamespacedHelpers} from 'vuex'
import HistoryTags from '@/components/HistoryTags.vue'
const {mapState:mapTabsState,mapMutations:mapTabsMutations}=createNamespacedHelpers('tabs')
export default {
    components:{HistoryTags},
    data(){
        return{
            menus:[],
            isCollapse:false,
            logotitle:'蜗牛BOSS系统'
        }
    },
    computed:{
        ...mapState(["loginUser"]),
        ...mapTabsState(['history'])
    },
    methods:{
        ...mapTabsMutations(['removeTabs']),
        async getAuthMenus(){
            const result=await this.$api.users.getAuthMenus()
            this.menus=result.data
        },
        toggleCollpase(){
            this.isCollapse=!this.isCollapse
            if(this.isCollapse){
               this.logotitle="蜗牛"
            }else{
               this.logotitle="蜗牛BOSS系统"
            }
        },
        goUserInfo(){
            this.$router.push("/home/centerInfo")
        },
        removeTagsByIndex(index){
            console.log('indexaaaaa',index);
            this.removeTabs(index)
            this.$router.push(this.history[this.history.length-1].path)
        }
    },
    created(){
        this.getAuthMenus()
    }
}
</script>

<style lang="scss">
    .container{
        min-height: 100vh;
        .el-aside{
            width: 180px;
            background-color: #000;
            .logo{
                display: flex;
                height: 60px;
                background: skyblue;
                font-family: '华文琥珀';
                justify-content: center;
                align-items: center;
                font-size: 25px;
                color: white;
            }
            .el-menu{
                border: none;
            }
        }
        .main-container{
            .el-header{
                background-color: #f5f5f5;
                 display: flex;
                 align-items: center;
                 .bar{
                    display: flex;
                    width: 100%;
                    justify-content: space-between;
                    margin-right:20px; 
                    .tools{
                        font-size:20px
                    }
                 }
            }      
        }
    }
     .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
 
</style>